<template>
  <div>
    Charts
    <div id="main"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import axios from 'axios'
export default defineComponent({

  setup(props, context) {
    const state:any = reactive({
      personList: [
        {
          value: [],
          name: '女',
          max: 0
        },
        {
          value: [],
          name: '男',
          max: 0
        }
      ],
      indicator: []
    })


    const getData = async () => {
      const res = await axios.post('http://111.229.63.2:9977/api/user/token/obtain/', {
          "username": "test01",
          "password": "123456"
        })
      const token = res.data.access;
      console.log('token:', token)

      const result = await axios.get('http://111.229.63.2:9977/api/health/check/overall_score_radar_chart/?year=2014', {
        headers: {
          authorization: 'Bearer ' + token
        }
      })
      const list:any = Object.values(result.data);
      list[0].forEach((v:any) => {
        state.personList[0].value.push(v.value);
        state.indicator.push({
          name: v.name,
          max: 100
        })
      })
      list[1].forEach((v:any) => {
        state.personList[1].value.push(v.value);
        state.personList[1].name = '男'
      })
      console.log("personList:", state.personList)
      drawTest()
    }

    onMounted(() => {
      getData()
    })

    const drawTest = () => {
      // 基于准备好的dom，初始化echarts实例
      const mainDom: any = document.getElementById('main');
      var myChart = echarts.init(mainDom);
      // 绘制图表
      const option = {
            title: {
                text: '基础雷达图'
            },
            legend: {
                data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
            },
            radar: {
                // shape: 'circle',
                indicator: state.indicator
            },
            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                data: state.personList
            }]
        };
      // console.log('option:', option)
      myChart.setOption(option);
    }


    return {

    }
  }
})
</script>
<style lang="scss">
   #main {
     width: 400px;
     height: 500px;
   }
</style>
